<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		:root {
			--clr-brand: rgb(255 0 125);
			--clr-primary: rebeccapurple;
			--clr-secondary: #f6c34d;
		}
		* {
			padding: 0;
			margin: 0;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			background-color: #333;
			width: 100%;
			height: 100vh;
			padding: 20px;
		}
		div {
			padding: 10px;
			color: #fff;
			width: 200px;
			height: 100px;
		}
		.bg1 {
			background-color: hsl(from var(--clr-primary) h s l  / .5);
			/* background-color: hsl(from var(--clr-brand) h s l  / 50%); */
		}
		.bg2 {
			background-color: hsl(from var(--clr-primary) h s calc(l - 150));
		}
		.bg3 {
			background-color: hsl(from var(--clr-primary) h s 20% / 50%);
		}
		.bg4 {
			background-color: rgb(from var(--clr-primary) r g calc(b + 150));
		}
		.bg5 {
			background-color: rgb(from var(--clr-primary) r g b / .8);
		}
		.container > div:hover {
			/* 下列示例展示了改变颜色函数 oklch() 的 L（明度）、C（色度）和 H（色相）值的效果。 */
			background-color: oklch(from var(--clr-primary) calc(l * .5) c h);
		}
	</style>
	<body>
		<div class="container">
			<div class="bg1">如何在 Microsoft Office Word中插入示例文本 若要在 Word 中插入示例文本，请使用以下方法之一。 </div>
			<div class="bg2">方法 1：使用 rand () 若要在Word中插入本地化的示例文本，请在要显示文本的文档中键入 =rand () ，然后按 Enter 。</div>
			<div class="bg3">方法 1：使用 rand () 若要在Word中插入本地化的示例文本，请在要显示文本的文档中键入 =rand () ，然后按 Enter 。</div>
			<div class="bg4">方法 1：使用 rand () 若要在Word中插入本地化的示例文本，请在要显示文本的文档中键入 =rand () ，然后按 Enter 。</div>
			<div class="bg5">方法 1：使用 rand () 若要在Word中插入本地化的示例文本，请在要显示文本的文档中键入 =rand () ，然后按 Enter 。</div>
		</div>
	</body>
</html>